<!--
 * @Description: 网址库
 * @Author: hanyu
 * @Date: 2022-03-08 07:54:45
 * @LastEditTime: 2022-03-16 15:55:37
 * @LastEditors: hanyu
-->
<template>
    <div class=''>
        <div style="height: 400px">
            <Table @on-selection-change="handleSelectChange" stripe :columns="table.columns" :data="table.data">
                <div slot="website_link" slot-scope="{row}">
                    <div style="color: #2D8cF0" class="one-row" @click="onOpen(row.website_link)">
                        {{row.website_link}}
                    </div>
                </div>
                <div slot="created_at" slot-scope="{row}">
                    {{row.grab_time | toDateString}}
                </div>
                <div slot="status" slot-scope="{row}">
                    {{row.status | getStatus}}
                </div>
                <div slot="action" slot-scope="{row}">
                    <a @click="onEdit(row)">编辑</a>
                </div>
            </Table>
        </div>
        <Pagination class="pageination-box" style="margin-top: 20px" :pageInfo="pageInfo" @change="handleChange"></Pagination>
    </div>
</template>

<script>
import Pagination from '@/components/pagination'
import moment from 'moment';
import {
  allApi
} from '@/api/allApi';
export default {
  components: { Pagination },
  filters: {
    toDateString(date) {
      return moment(date * 1000).format('YYYY-MM-DD hh:mm')
    },
    getStatus(status) {
      let statusName = ''
      switch (Number(status)) {
        case 0:
          statusName = '未爬取'
          break;
        case 1:
          statusName = '爬取中'
          break;
        case 2:
          statusName = '已完成'
          break;
        case 3:
          statusName = '不可用'
          break;
        default:
          break;
      }
      return statusName
    },
  },
  computed: {
    pageInfo() {
      return {
        page: this.sendParams.page,
        pageTotal: this.sendParams.pageTotal,
        pageSize: this.sendParams.pageSize
      }
    },
  },
  data() {
    //这里存放数据
    return {
      sendParams: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      table: {
        columns: [
          {
            type: 'selection',
            width: 55,
            align: 'center'
          },
          {
            title: '链接',
            slot: 'website_link'
          },
          {
            title: '入库时间',
            width: 150,
            slot: 'created_at'
          },
          {
            title: '状态',
            width: 100,
            slot: 'status'
          },
          {
            width: 80,
            title: '操作',
            slot: 'action'
          }
        ],
        data: []
      },
    };
  },
  mounted() {
    this.websiteLib()
  },
  //方法集合
  methods: {
    onEdit(row) {
      this.$emit('onEdit', row)
    },
    // 选择
    handleSelectChange(e) {
      this.$emit('onDelList', e)
    },
    // 打开
    onOpen(url) {
      window.open(url)
    },
    // 点某一行
    onRowClick(e) {
    },
    handleChange(e) {
      this.sendParams.page = e.page
      this.websiteLib()
    },
    async websiteLib() {
      try {
        this.$Spin.show()
        const res = await allApi.websiteLib(this.sendParams)
        this.table.data = res.data.rows
        this.sendParams.pageTotal = res.data.total
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide()
    },
  },
}
</script>
<style lang='less' scoped>
/deep/ .ivu-table th {
  background-color: #0064ef;
  color: #fff;
  font-weight: normal;
}
/deep/ .ivu-table-stripe .ivu-table-body tr:nth-child(n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(n) td {
  background-color: #edf0ff;
}
/deep/ .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
  background-color: #d4e1fe;
}
/deep/ .ivu-table:before {
  content: none;
}
.pageination-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  margin: 0 auto;
}
</style>